<template>
<div id='add'>
    <!-- 头部 -->
<logintop minddletop="注册bilibili"></logintop>



<!-- 内容 -->
<!-- rule="^.{6,16}$" 正则 -->
<logintext 
label="姓名" 
placeholder="请输入姓名" 
rule="^.{6,16}$" 
class="logintext1"
@inputchange="res => name = res"
></logintext>
<logintext 
label="账号" 
placeholder="请输入账号" 
rule="^.{6,16}$"
@inputchange="res => username = res"
></logintext>
<logintext 
label="密码" 
placeholder="请输入密码" 
rule="^.{6,16}$" 
type="password"
@inputchange="res => password = res"
></logintext>

<!-- 按钮 -->
<loginbtn loginbtn="注册" @registerSubmit="registerSubmit"></loginbtn>
</div>
</template>

<script>
import logintop from '../components/logintop'
import logintext from '../components/logintext'
import loginbtn from '../components/loginbtn'
export default {
data() {
    return {
        name:'',
        username:'',
        password:''
    }
},
components:{
    logintop,
    logintext,
    loginbtn,
},
methods: {
    registerSubmit(){
        if(this.name && this.username && this.password){
            this.$http.post('/register',{
                name:this.name,
                username:this.username,
                password:this.password
            }).then(res => {
                console.log(res)
            })
        }
    }
},

// 第一种写法 
// methods: {
//     succipt(text){
//     //   console.log(text)
//     this.name = text
//     }
// },
}
</script>

<style  scoped>
.logintext1{
    padding-top: 4.167vw;
    padding-bottom: 4.167vw;
}
</style>